<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Příklad 2</title>
		
		<script src="./framework-min.js"></script>
		
		<script>
			
			new sCanvas("canvas", function() {
				
				var i, j,
					rects = this.group("rectangles");
				
				for (i = 0; i < 5; i++) {
					for (j = 0; j < 7; j++) {
						this.rect({
							x: j * 50 + 50,
							y: i * 50 + 50,
							width: 30,
							height: 30,
							fill: "#666",
							stroke: "#000",
							lineWidth: 2,
							group: rects,
							opacity: 0.2
						});
					}
				}

				rects.animate({
					rotation: 4 * Math.PI,
					x: 200,
					y: 150,
					opacity: 0.7
				}, 10000)
				.pause()
				.animate({ rotation: "+=" + (2 * Math.PI) }, {
					duration: 5000,
					repeat: Infinity
				});
				
				this.text("play", 0, 10).click(function() {
					rects.play();
				});

			}, function() {
				alert("Při inicializaci canvasu došlo k chybě.");
			});
			
		</script>
		
		<style>
			
			#canvas{
				width: 400px;
				height: 300px;
				float: left;
			}
			
			#code{
				width: 450px;
				float: left;
				font-family: monospace;
				font-size: 14px;
				white-space: pre-wrap;
			}
			
			#link{
				position: absolute;
				top: 0;
				right: 0;
				color: #888;
				font-size: 10px;
				text-decoration: none;
			}
			
		</style>
		
	</head>
	<body>
		
		<div id="canvas">
			<canvas width="400" height="300"></canvas>
		</div>
		
		<div id="code">    var i, j,
        rects = this.group("rectangles");

    for (i = 0; i &lt; 5; i++) {
        for (j = 0; j &lt; 7; j++) {
            this.rect({
                x: j * 50 + 50, //...
            });
        }
    }
    rects.animate({
        rotation: 4 * Math.PI, //...
    }, 10000)
    .pause()
    .animate({ rotation: "+=" + (2 * Math.PI) }, {
        duration: 5000,
        repeat: Infinity
    });

    this.text("play", 0, 10).click(function() {
        rects.play();
    });
		</div>
		
		<a href="./example1.html" id="link">«</a>
		
	</body>
</html>
